<template>
  <aside class="site-sidebar" :class="'site-sidebar--' + sidebarLayoutSkin">
    <div class="site-sidebar__inner">
      <el-menu
        :default-active="menuActiveName || 'home'"
        :collapse="sidebarFold"
        :collapseTransition="false"
        class="site-sidebar__menu"
      >
<!--        <el-menu-item index="home" @click="$router.push({ name: 'home' })">-->
<!--          <icon-svg name="shouye" class="site-sidebar__menu-icon"></icon-svg>-->
<!--          <span slot="title">首页</span>-->
<!--        </el-menu-item>-->
        <el-submenu index="system">
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>系统管理</span>
          </template>
          <el-menu-item index="sys-user" @click="$router.push({ name: 'sys-user' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">管理员列表</span>
          </el-menu-item>
          <el-menu-item index="sys-menu" @click="$router.push({ name: 'sys-menu' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">菜单管理</span>
          </el-menu-item>
          <el-menu-item index="sys-module" @click="$router.push({ name: 'sys-module' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">模块管理</span>
          </el-menu-item>
          <el-menu-item index="sys-dict" @click="$router.push({ name: 'sys-dict' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">字典管理</span>
          </el-menu-item>
<!--          <el-menu-item index="sys-config" @click="$router.push({ name: 'sys-config' })">-->
<!--            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">参数管理</span>-->
<!--          </el-menu-item>-->
          <el-menu-item index="sys-config" @click="$router.push({ name: 'sys-adposition' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">广告位置</span>
          </el-menu-item>
          <el-menu-item index="integral" @click="$router.push({ name: 'integral-classification' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">积分规则</span>
          </el-menu-item>
          <!-- <el-menu-item index="job-schedule" @click="$router.push({ name: 'job-schedule' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">定时任务</span>
          </el-menu-item> -->
          <el-menu-item index="sys-log" @click="$router.push({ name: 'sys-log' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">系统日志</span>
          </el-menu-item>
          <!-- <el-menu-item index="oss-oss" @click="$router.push({ name: 'oss-oss' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">文件上传</span>
          </el-menu-item> -->
        </el-submenu>
        <el-submenu index="tenant">
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>租户管理</span>
          </template>
          <el-menu-item index="tenant-role" @click="$router.push({ name: 'tenant-role' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">租户角色</span>
          </el-menu-item>
          <el-menu-item index="tenant-list" @click="$router.push({ name: 'tenant-list' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">租户列表</span>
          </el-menu-item>
          <el-menu-item index="tenant-user" @click="$router.push({ name: 'tenant-user' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">用户列表</span>
          </el-menu-item>
          <el-menu-item index="sys-role" @click="$router.push({ name: 'sys-role' })">
            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">用户角色</span>
          </el-menu-item>
        </el-submenu>

<!--        <el-submenu index="shoucang">-->
<!--          <template slot="title">-->
<!--            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span>积分管理</span>-->
<!--          </template>-->
<!--          <el-menu-item index="integral" @click="$router.push({ name: 'integral' })">-->
<!--            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">积分编码</span>-->
<!--          </el-menu-item>-->
<!--          <el-menu-item index="integral" @click="$router.push({ name: 'integral-classification' })">-->
<!--            <icon-svg name="editor" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">积分分类</span>-->
<!--          </el-menu-item>-->
<!--        </el-submenu>-->
        <!-- 用户管理 -->
         <el-submenu index="user">
          <template slot="title">
            <icon-svg name="shoucang" class="site-sidebar__menu-icon"></icon-svg>
            <span>用户管理</span>
          </template>
          <el-menu-item index="user-list" @click="$router.push({ name: 'user-list' })">
            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>
            <span slot="title">用户列表</span>
          </el-menu-item>
<!--          <el-menu-item index="user-recovery" @click="$router.push({ name: 'user-recovery' })">-->
<!--            <icon-svg name="tubiao" class="site-sidebar__menu-icon"></icon-svg>-->
<!--            <span slot="title">人员恢复</span>-->
<!--          </el-menu-item>-->
        </el-submenu>
        <sub-menu
          v-for="menu in menuList"
          :key="menu.menuId"
          :menu="menu"
          :dynamicMenuRoutes="dynamicMenuRoutes"
        ></sub-menu>
      </el-menu>
    </div>
  </aside>
</template>

<script>
  import SubMenu from './main-sidebar-sub-menu'
  import {isURL} from '@/utils/validate'

  export default {
    data () {
      return {
        dynamicMenuRoutes: []
      }
    },
    components: {
      SubMenu
    },
    computed: {
      sidebarLayoutSkin: {
        get () {
          return this.$store.state.common.sidebarLayoutSkin
        }
      },
      sidebarFold: {
        get () {
          return this.$store.state.common.sidebarFold
        }
      },
      menuList: {
        get () {
          return this.$store.state.common.menuList
        },
        set (val) {
          this.$store.commit('common/updateMenuList', val)
        }
      },
      menuActiveName: {
        get () {
          return this.$store.state.common.menuActiveName
        },
        set (val) {
          this.$store.commit('common/updateMenuActiveName', val)
        }
      },
      mainTabs: {
        get () {
          return this.$store.state.common.mainTabs
        },
        set (val) {
          this.$store.commit('common/updateMainTabs', val)
        }
      },
      mainTabsActiveName: {
        get () {
          return this.$store.state.common.mainTabsActiveName
        },
        set (val) {
          this.$store.commit('common/updateMainTabsActiveName', val)
        }
      }
    },
    watch: {
      $route: 'routeHandle'
    },
    created () {
      this.menuList = JSON.parse(sessionStorage.getItem('menuList') || '[]')
      this.dynamicMenuRoutes = JSON.parse(
        sessionStorage.getItem('dynamicMenuRoutes') || '[]'
      )
      this.routeHandle(this.$route)
    },
    methods: {
      // 路由操作
      routeHandle (route) {
        if (route.meta.isTab) {
          // tab选中, 不存在先添加
          var tab = this.mainTabs.filter(item => item.name === route.name)[0]
          if (!tab) {
            if (route.meta.isDynamic) {
              route = this.dynamicMenuRoutes.filter(
                item => item.name === route.name
              )[0]
              if (!route) {
                return console.error('未能找到可用标签页!')
              }
            }
            tab = {
              menuId: route.meta.menuId || route.name,
              name: route.name,
              title: route.meta.title,
              type: isURL(route.meta.iframeUrl) ? 'iframe' : 'module',
              iframeUrl: route.meta.iframeUrl || ''
            }
            this.mainTabs = this.mainTabs.concat(tab)
          }
          this.menuActiveName = tab.menuId + ''
          this.mainTabsActiveName = tab.name
        }
      }
    }
  }
</script>
